export default {
  functional: true, // 表示此为函数式组件
  name: 'router-view',

  // 函数式组件效率更高，没有实例，没有this, this 为 null
  // 函数式组件使用第二个参数 context 来代替 this， 其中有 data.parent 等属性
  render (h, context) {
    let {data, parent} = context;
    let route = parent.$route; // 此处取值后就会对其进行依赖收集
    let depth = 0; //  当前 router-view 组件的深度
    let records = route.matched;
    data.routerView = true; // 标记是否是 router-view

    // 此循环的作用是递归向上查找 router-view 组件, 以确定自身的 router-view 组件的层级深度
    while (parent) {
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++;
      }
      parent = parent.$parent;
    }
    let record = records[depth];
    if (!record) {
      return h ();
    }
    return h (records[depth].component, data);
  },
};
